<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App配置</title>
    <style>
        .algv{
        width:300px;
        }
        label {
        width: 70px;
        text-align: left;
        display: inline-block;
    }
    </style>
</head>

<body onload="loadJSON()">
    <div class="algv">
        <p id="demo">AlgV工具配置</p>
        <form id="algv-form">
            测试环境<input type="radio" id="test-env" name="envselect" onchange="updateFormValues()"/>
            生产环境<input type="radio" id="pro-env" name="envselect" onchange="updateFormValues()"/>
            <hr>
            <label>ip</label><input type="text" id="ip" /> <br>
            <label>port</label><input type="number" id="port" />
            <hr>
        </form>
            <input type="button" value="提交" id="submit" onclick="sendJSON()"/>
    </div>
</body>
 <script type="text/javascript">
    
    var test_enable = 1;
    var test_ip = "222.128.47.209";
    var test_port = 9909;

    var pro_enable = 0;
    var pro_ip = "222.88.253.20";
    var pro_port = 9909;

    function setFormValues(){
        if(test_enable){
            document.getElementById("test-env").checked = test_enable;
            document.getElementById("ip").value = test_ip;
            document.getElementById("port").value = test_port;
        }else if(pro_enable){
            document.getElementById("pro-env").checked = pro_enable;
            document.getElementById("ip").value = pro_ip;
            document.getElementById("port").value = pro_port;
        }
    }

    function updateFormValues(){
        if(document.getElementById("test-env").checked){
            document.getElementById("ip").value = test_ip;
            document.getElementById("port").value = test_port;
            test_enable = 1;
            pro_enable = 0;
        }else if(document.getElementById("pro-env").checked){
            document.getElementById("ip").value = pro_ip;
            document.getElementById("port").value = pro_port;
            pro_enable = 1;
            test_enable = 0;
        }
    }

    function sendJSON(){
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/SDCAPI/V1.0/AIPlus/algv", true);
        xhr.setRequestHeader('content-type', 'application/json;charset=UTF-8');
        var sendData = {"pro":{"enable":pro_enable,"ip":pro_ip,"port":pro_port},"test":{"enable":test_enable,"ip":test_ip,"port":test_port}};
        xhr.send(JSON.stringify(sendData));
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if(xhr.getResponseHeader('content-type')==='application/json;charset=UTF-8'){
                    var result = JSON.parse(xhr.responseText);	
                    if(result.code===1){
                            alert("更新配置失败！");
                    }else {
                            alert("更新配置成功！");
                    }
                }
            }
        }
    }

    function loadJSON(){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/SDCAPI/V1.0/AIPlus/algv", true);
        xhr.send();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if(xhr.getResponseHeader('content-type')==='application/json;charset=UTF-8'){
                    var result = JSON.parse(xhr.responseText);	
                    if(result.code===1){
                            setFormValues();
                            alert("加载配置失败!");
                    }else {
                            test_enable = result.params.test.enable;
                            test_ip = result.params.test.ip;
                            test_port = result.params.test.port;
                            pro_enable = result.params.pro.enable;
                            pro_ip = result.params.pro.ip;
                            pro_port = result.params.pro.port;
                            setFormValues();
                            alert("加载配置成功！");
                    }
                }
            }
        }
    }
    </script>
</html>